import React from 'react';
import { Link } from 'react-router-dom';

const containerStyle: React.CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '80vh',
  textAlign: 'center',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
};

const headingStyle: React.CSSProperties = {
  fontSize: '6rem',
  fontWeight: 700,
  margin: 0,
  color: '#333',
};

const subHeadingStyle: React.CSSProperties = {
  fontSize: '1.5rem',
  margin: '0 0 1rem 0',
  color: '#555',
};

const paragraphStyle: React.CSSProperties = {
  marginBottom: '2rem',
  color: '#777',
};

const linkStyle: React.CSSProperties = {
  padding: '12px 24px',
  backgroundColor: '#007bff',
  color: 'white',
  textDecoration: 'none',
  borderRadius: '5px',
  transition: 'background-color 0.3s',
};

const NotFound: React.FC = () => {
  return (
    <div style={containerStyle}>
      <h1 style={headingStyle}>404</h1>
      <h2 style={subHeadingStyle}>页面未找到</h2>
      <p style={paragraphStyle}>抱歉，您要查找的页面不存在。</p>
      <Link
        to="/"
        style={linkStyle}
        onMouseOver={e => (e.currentTarget.style.backgroundColor = '#0056b3')}
        onMouseOut={e => (e.currentTarget.style.backgroundColor = '#007bff')}
      >
        返回首页
      </Link>
    </div>
  );
};

export default NotFound;
